import React, { useState, useCallback,useMemo } from 'react'
import {useNavigate,useLocation } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { Routes, Route, Navigate } from 'react-router-dom'
import { Layout, Menu, Button, Row, Col,Avatar } from 'antd'
import { ChromeOutlined,TeamOutlined,HomeOutlined,AppstoreOutlined,MenuFoldOutlined,MenuUnfoldOutlined,ProfileOutlined,GoldOutlined,FolderOpenOutlined} from '@ant-design/icons'
import '../manage.scss'

import Home from './manage/Home'
// 学生管理组件路由
import Students from './manage/Students'
import StudentsList from './manage/students/List'

// 班级管理组件路由
import Class from './manage/Class'
import ClassList from "./manage/class/List";
import ClassDetail from './manage/class/ClassDetail'

// 学科管理组件路由
import Subject from './manage/Subject'
import SubjectList from "./manage/subject/List";

// 分校管理
import School from './manage/School'
import SchoolList from "./manage/school/List";

// 项目管理
import Project from './manage/Project'
import ProjectList from "./manage/project/List";



const { Header, Sider, Content } = Layout;



function Manage({user}) {
    const [collapsed, setCollapsed] = useState(false);
    const dispatch = useDispatch()
    const navigate = useNavigate();
    const logout = useCallback(function () {
        dispatch({ type: 'logout' })
    }, [])

    const baseUrl = '/manage'
    const menu = useMemo(()=>[
        {
            icon: <ChromeOutlined style={{color:"yellow"}}/>,
            label: '班级管理系统',
        },
        {
            key: '/home',
            icon: <HomeOutlined />,
            label: '首页',
        },
        {
            key: '/students',
            icon: <TeamOutlined />,
            label: '学生管理',
            children:[
                {
                    key: '/students/list', 
                    label: '学生列表',
                },
            ]
        },
        {
            key: '/class',
            icon: <AppstoreOutlined />,
            label: '班级管理',
            children:[
                {
                    key: '/class/list', 
                    label: '班级列表',
                },    
            ]
        },
        {
            key: '/subject',
            icon: <ProfileOutlined />,
            label: '学科管理',
            children:[
                {
                    key: '/subject/list', 
                    label: '学科列表',
                },
            ]
        },
        {
            key: '/school',
            icon: <GoldOutlined />,
            label: '分校管理',
            children:[
                {
                    key: '/school/list', 
                    label: '分校列表',
                },
            ]
        },
        {
            key: '/project',
            icon: <FolderOpenOutlined />,
            label: '项目管理',
            children:[
                {
                    key: '/project/list', 
                    label: '项目列表',
                },
            ]
        },
    ],[])
    const loaction = useLocation()
    const current = loaction.pathname.replace(baseUrl,'') || '/home'
    const openCurrent = loaction.pathname.match(/\/(user|goods)/)?.[0]
    const changeMenu = useCallback(function({ item, key, keyPath, domEvent }){
        console.log('changeMenu', key, keyPath)
        // const path = keyPath.reverse().join('')
        // console.log('path',path)
        navigate(baseUrl + key)

    },[])
    return (
        <div className="container">
            <Layout style={{height:'100vh',overflow:'auto'}}>
                <Sider trigger={null} collapsible collapsed={collapsed}>
                    
                    <Menu
                        theme="dark"
                        mode="inline"
                        defaultSelectedKeys={[current]}
                        defaultOpenKeys={[openCurrent]}
                        items={menu}
                        onClick={changeMenu}
                    />
                </Sider>
                <Layout className="site-layout" style={{height:'100vh',overflow:'auto'}}>
                    <Header
                        className="site-layout-background"
                        style={{
                            padding: 0,
                            color:'#0063ee'
                        }}
                    >
                        <Row>
                            <Col span={12}>
                                {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                                    className: 'trigger',
                                    onClick: () => setCollapsed(!collapsed),
                                })}
                            </Col>
                            <Col span={12} style={{textAlign:'right'}}>
                                <Avatar size={40}
                                style={{backgroundColor: '#f56a00', }}
                                >{user.username}</Avatar>
                                <Button type="link" size="small" onClick={logout}>退出</Button>
                            </Col>
                        </Row>
                    </Header>
                    <Content
                        className="site-layout-background"
                        style={{
                            margin: '24px 16px',
                            padding: 24,
                            minHeight: 280,
                        }}
                    >
                        <Routes>
                            {/* /manage/home */}
                            <Route index element={<Navigate to='home'/>}/>
                            <Route path='home' element={<Home />} />
                            <Route path='students' element={<Students/>}>
                                <Route path='list' element={<StudentsList/>}/>
                            </Route>
                            <Route path='class' element={<Class/>}>
                                <Route path='list' element={<ClassList/>}/>
                                <Route path=':id' element={<ClassDetail />} />
                            </Route>
                            <Route path='subject' element={<Subject/>}>
                                <Route path='list' element={<SubjectList/>}/>
                            </Route>
                            <Route path='school' element={<School/>}>
                                <Route path='list' element={<SchoolList/>}/>
                            </Route>
                            <Route path='project' element={<Project/>}>
                                <Route path='list' element={<ProjectList/>}/>
                            </Route>
                        </Routes>
                    </Content>
                </Layout>
            </Layout>

        </div>
    )
}

export default Manage